import copy from 'copy-to-clipboard'
import { Button, Form, message, Tabs, Tooltip } from 'antd'
import { CopyOutlined } from '@ant-design/icons'

import { Loading } from '@/components/Loading'
import { Texty } from '@/components/Texty'
import { useDynamicField } from '@oBiz/hooks/useDictionaryList'
import styles from './styles.module.less'

export const DynamicField = () => {
  const { dynamicFieldFetching, dynamicFieldList } = useDynamicField()

  return (
    <div className={styles.DynamicField}>
      <Form.Item className={styles.DynamicField_label} label="动态字段" colon={false} />
      <div className={styles.DynamicField_main}>
        {dynamicFieldFetching ? (
          <Loading />
        ) : (
          <Tabs
            className={styles.DynamicField_tabs}
            size="small"
            items={dynamicFieldList?.map(item => ({
              key: item.id + '',
              label: item.attrKey,
              style: { height: '100%' },
              children: (
                <div style={{ height: '100%', overflow: 'auto' }}>
                  {item.childrenList?.map(d => (
                    <div key={d.id} className={styles.DynamicField_item}>
                      <Texty>
                        {d.attrKey}：{d.attrValue}
                      </Texty>
                      <Tooltip title="复制">
                        <Button
                          type="link"
                          icon={<CopyOutlined />}
                          onClick={() => {
                            copy(d.attrValue)
                            message.success('复制成功', 1)
                          }}
                        />
                      </Tooltip>
                    </div>
                  ))}
                </div>
              ),
            }))}
          />
        )}
      </div>
    </div>
  )
}
